<template>
  <div
    :style="{backgroundImage: `url(${imageUrl}/img/bg_versions.png)`}"
    class="version"
  >
    <nav-bar class="nav-bar-position">版本说明</nav-bar>
    <white-space/>

    <div class="check">
      <my-button @click.native="showToast">
        检查更新
      </my-button>
    </div>


    <div class="time">
      <div class="version-num">
        {{ version.number }}
      </div>
      <div class="update-time">
        {{ version.created_time }}
      </div>
    </div>

    <div class="version-detail">
      <rich-text :nodes="version.instructions"></rich-text>
<!--      <ul>-->
<!--        {{ version.instructions }}-->
<!--      </ul>-->
    </div>

  </div>
</template>

<script>
  import { imageUrl } from "../../api/url.config";
  import { mapActions, mapState } from 'vuex'

  export default {
    name: "version",
    data() {
      return {
        imageUrl
      }
    },
    computed: mapState('User', ['version']),
    methods: {
      ...mapActions('User', ['reqVersions']),
      showToast(){
        uni.showToast({
          title:'当前已是最新版本',
          icon:"none"
        })
      }
    },
    onLoad() {
      this.reqVersions()
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .version {
    $padding: 30;

    @include bg;
    min-height: 100vh;
    background: {
      size: upx(750);
      position-y: $status_bar;
      repeat: no-repeat;
    };

    .check {
      padding: upx(380) 0 upx(30);
    }

    .time {
      width: upx(590 - $padding * 2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: upx($padding);
      border-bottom: upx(1) solid #EDF2F3;
      margin: 0 auto;

      .version-num {
        @include ft(30, #5D6473, 500)
      }

      .update-time {
        @include ft(30, #9096A3, 500)
      }
    }

    &-detail {
      width: upx(590 - $padding * 2);
      margin: upx(20) auto;
      @include ft(28, #5D6473, 400);
      line-height: 2.2em;
    }
  }
</style>
